import React,{FC} from "react";
import { Link, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux"; 
import { UserOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { LOGIN_PATHNAME } from "../router";
import { removeToke } from "../utils/user-token";
import useGetUserInfo from "../hooks/useGetUserInfo";
import { logoutReducer } from "../store/userReducer";
const UserInfo:FC=()=>{
    const nav=useNavigate()
    const dispatch=useDispatch()
    //自动调用useRequest
    // const {data}= useRequest(getUserInfoService)
    // const {username,nickname}= data||{}
    //从redux 中获取信息
    const {username,nickname}= useGetUserInfo()

    function logout(){
        dispatch(logoutReducer()) //退出清空了 redux 存储的user信息
        removeToke() //清除token
        nav(LOGIN_PATHNAME)
    }
    const UserInfo=(<>
        <span style={{color:'#e8e8e8'}}>
            <UserOutlined/>&nbsp;
            {nickname}
        </span>
        <Button type="link" onClick={logout}>退出</Button>
    </>)
    const Login=(<>
      <Link to={LOGIN_PATHNAME}>登录</Link>
    </>)

    return <>
    {username?UserInfo:Login}
    </>
}
export default UserInfo